/* =========================
   ARQUIVO: base.css
========================= */

/* VARIÁVEIS E ESTILOS GLOBAIS */
:root {
  --bg-dark: #0b0e12;
  --bg-darker: #06080b;
  --text: #e8edf3;
  --muted: #b7c1ce;
  --brand: #4fd1c5;
  --accent: #7aa2ff;
  --card: #11161d;
  --border: #1b2330;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  padding: 0;
  margin: 0;
  background: var(--bg-dark);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
  line-height: 1.6;
}

img, video, iframe { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* CLASSES DE UTILIDADE */
.container {
  width: min(1120px, 92%);
  margin-inline: auto;
}

.page-title {
  margin-top: 100px;
  margin-bottom: 30px;
  font-size: 3rem;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
  40% { transform: translate(-50%, 8px); }
  60% { transform: translate(-50%, 4px); }
}

@keyframes spin { 
  to { transform: rotate(360deg); } 
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}